<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=contract-width, initial-scale=1, maximum-scale=1">
    <% include("/templates/common/header.html"){} %>
    <!-- jqgrid-->
    <link href="${ctxPath!}/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath!}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath!}/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td{
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
    <div class="content-search">
        <div class="content-search">
            <form id="search" class="layui-form layui-form-pane" lay-filter="form">
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="userId" id="userId" lay-filter="userId" lay-search>
                            <option value="">请选择客户</option>
                            <%
                            for(user in users!){
                            %>
                            <option value="${user.id}">${user.username}</option>
                            <%
                            }
                            %>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="nurseryTeacherId" id="nurseryTeacherId" lay-filter="nurseryTeacherId" lay-search>
                            <option value="">请选择育婴师</option>
                            <%
                            for(nurseryTeacher in nurseryTeachers!){
                            %>
                            <option value="${nurseryTeacher.id}">${nurseryTeacher.username}</option>
                            <%
                            }
                            %>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="nurseryConsultantId" id="nurseryConsultantId" lay-filter="nurseryConsultantId" lay-search>
                            <option value="">请选择育婴顾问</option>
                            <%
                            for(nurseryConsultant in nurseryConsultants!){
                            %>
                            <option value="${nurseryConsultant.id}">${nurseryConsultant.username}</option>
                            <%
                            }
                            %>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                            <input class="layui-input" type="text" id="startDate" name="startDate"  placeholder="请选择开始时间" value="${contract.startDate!}" lay-verify="date" readonly/>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" id="endDate" name="endDate"  placeholder="请选择结束时间" value="${contract.endDate!}" lay-verify="date" readonly/>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="status" id="status" lay-filter="status" >
                            <option value="">请选择合同状态</option>
                            <option value="1" >正在进行</option>
                            <option value="0" >已结束</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <atom:auth type="button" perm="sys:contract:list"  iconText="&#xe615;" onclick="return search();" text="搜索"/>
                </div>
                <div class="layui-inline">
                    <atom:auth type="button" perm="sys:contract:add" iconText="&#xe654;" onclick="return add();" text="添加合同"/>
                </div>
            </form>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div style="padding: 2px;">
        <div class="jqGrid_wrapper">
            <table id="table"></table>
            <div id="pager" ></div>
        </div>
    </div>

<script src="${ctxPath!}/jquery/jquery.min.js?v=2.2.4"></script>
<script src="${ctxPath!}/jquery/jquery.form.js?v=3.50.0"></script>
<script src="${ctxPath!}/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/frozen.js?v=1.0.1"></script>
<script src="${ctxPath!}/jqgrid/myjqGrid.js"></script>
<script src="${ctxPath!}/layui/layui.js"></script>
<script>

    layui.use('form', function(){
    });
    layui.use('laydate',function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startDate' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#endDate' //指定元素
            ,type: 'datetime'
        });
    })

    var colNames = ["ID" ,"客户","育婴师","育婴顾问","服务开始时间",
        "服务结束时间","合同金额","合同状态","操作"];
    var colModel = [{
        name : "id",
        index : "id",
        width : 40,
        hidden: true,
        align : "left"
    },{
        name : "userName",
        index : "userName",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "nurseryTeacherName",
        index : "nurseryTeacherName",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "nurseryConsultantName",
        index : "nurseryConsultantName",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "startDate",
        index : "startDate",
        sortable : false,
        width : 70,
        align : "center",
        formatter:'date',
        formatoptions:{newformat:'Y-m-d'}
    },{
        name : "endDate",
        index : "endDate",
        sortable : false,
        width : 70,
        align : "center",
        formatter:'date',
        formatoptions:{newformat:'Y-m-d'}
    },{
        name : "money",
        index : "money",
        sortable : false,
        width : 60,
        align : "center"
    },{
        name : "status",
        index : "status",
        sortable : false,
        width : 40,
        align : "center",
        formatter : function(cellvalue, options, rowdata){
            if(cellvalue==true){
                return "正在进行";
            }else {
                return "已结束";
            }
        }
    },{
        name : "action",
        index : "action",
        width : 170,
        title:false,
        editable:true,
        align : "center",
        formatter : function(cellvalue, options, rowdata){
            var html = '<atom:auth type="button" perm="sys:contract:list" extClass="btn-info" iconText="&#xe60a;" dataId="' + rowdata.id + '" text="详细信息" />'+
                '<atom:auth type="button" perm="sys:contract:edit" extClass="btn-edit" iconText="&#xe642;" dataId="' + rowdata.id + '" text="编辑合同" />'+
                '<atom:auth type="button" perm="sys:contract:finishContract" extClass="btn-del layui-bg-red" iconText="&#xe640;" dataId="' + rowdata.id + '" text="结束合同" />';
            return html;
        }
    }];

    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "${ctxPath!}/sys/contract/list.json",
            isSubGrid: false,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel
        })
    });

    function search(){
        myJqGrid.reloadGrid({"userId":$("#userId").val(),"nurseryTeacherId":$("#nurseryTeacherId").val(),"nurseryConsultantId":$("#nurseryConsultantId").val(),"startDate":$("#startDate").val(),"endDate":$("#endDate").val(),"status":$("#status").val(),"keyword":$("#keyword").val()});
        return false;
    }

    function add() {
        var index = layer.open({
            title: '添加等级信息',
            type: 2,
            area: ['550px', '500px'],
            content: '${ctxPath!}/sys/contract/edit'
        });
        layer.full(index);
        return false;
    }

    $(function(){

        $(document).on("click", ".btn-edit", function (e) {
            var index =  layer.open({
                title: '编辑合同',
                type: 2,
                area: ['550px', '500px'],
                content: '${ctxPath!}/sys/contract/edit?id='+$(this).data("id")
            });
            layer.full(index);
        });

        $(document).on("click", ".btn-info", function (e) {
            var index = layer.open({
                title: '详细信息',
                type: 2,
                area: ['500px', '500px'],
                content: '${ctxPath!}/sys/contract/view?id='+$(this).data("id")
            });
            layer.full(index);
        });

        $(document).on("click", ".btn-del", function (e) {
            var id = $(this).data("id");
            layer.confirm('确定结束该合同吗？', {
                icon: 3,
                btn: ['确定','取消'] //按钮
            }, function(){ //确定
                var params = {"id":id};
                console.log(id);
                $.post("${ctxPath!}/sys/contract/finishContract", params, function(data){
                    if(data.status == 200){
                        layer.alert(data.msg, {
                            icon: 1,
                            skin: 'layer-ext-moon'
                        },function () {
                            search();
                            layer.closeAll();
                        });
                    }else{
                        layer.alert(data.msg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                });
            }, function(){ //取消
            });
        });
    });

</script>
</body>
</html>